<template>
	<div>
		<!-- <h1>This is tables Page!!!!</h1> -->
    <datetime-picker :datetime-val.sync="datetimeVal"></datetime-picker>
    <date-picker :date-val.sync="dateVal"></date-picker>
    <div class="btn">
      <div>
        <button @click="showDialog('1')">Show error message</button>
        <button @click="showDialog('2')">A basic message</button>
        <button @click="showDialog('3')">A title message</button>
      </div>
      <div>
        <button @click="showDialog('4')">A success message</button>
        <button @click="showDialog('5')">Auto close timer</button>
        <button @click="showDialog('6')">A warning message</button>
      </div>
      <div>
        <button @click="showDialog('7')">A cancel warning</button>
        <button @click="showDialog('8')">Message with icon</button>
      </div>
    </div>
	</div>
</template>

<script>
import DatetimePicker from '../components/datetime-picker/DatetimePicker'
import DatePicker from '../components/datetime-picker/DatePicker'
export default {
  name: 'TablesView',
  data () {
    return {
      datetimeVal: '2014-09-12 23:23:12',
      dateVal: '2019-11-12'
    }
  },
  route: {
    data () {
      return {}
    }
  },
  methods: {
    showDialog (type) {
      if (type === '1') {
        window.swal('Oops...', 'Something went wrong!', 'error')
      } else if (type === '2') {
        window.swal('Here is a message!')
      } else if (type === '3') {
        window.swal('Here is a message!', 'It is pretty, is not it?')
      } else if (type === '4') {
        window.swal('Good job!', 'You clicked the button!', 'success')
        /* window.swal({
          title: 'Good job!',
          text: 'You clicked the button!',
          type: 'success'
        })*/
      } else if (type === '5') {
        window.swal({
          title: 'Auto close alert!',
          text: 'I will close in 2 seconds.',
          timer: 2000
        })
      } else if (type === '6') {
        window.swal({
          title: 'Are you sure?',
          text: 'You will not be able to recover this imaginary file!',
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#DD6B55',
          confirmButtonText: 'Yes, delete it!',
          closeOnConfirm: false
          // closeOnCancel: false
        }, () => {
          window.swal('Deleted!', 'Your imaginary file has been deleted!', 'success')
        })
      } else if (type === '7') {
        window.swal({
          title: 'Are you sure?',
          text: 'You will not be able to recover this imaginary file!',
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#DD6B55',
          confirmButtonText: 'Yes, delete it!',
          cancelButtonText: 'No, cancel plx!',
          closeOnConfirm: false,
          closeOnCancel: false
        }, (isConfirm) => {
          if (isConfirm) {
            window.swal('Deleted!', 'Your imaginary file has been deleted!', 'success')
          } else {
            window.swal('Cancelled', 'Your imaginary file is safe :)', 'error')
          }
        })
      } else if (type === '8') {
        window.swal({
          title: 'Sweet!',
          text: 'Here is a custom image.',
          imageUrl: '../../static/images/profile-menu.png'
        })
      }
    }
  },
  components: {
    DatetimePicker,
    DatePicker
  }
}
</script>

<style type="text/css">
@import '../less/sweet-alert.css';
button {
    background-color: #428BCA;
    color: white;
    border: none;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    font-weight: 600;
    border-radius: 3px;
    padding: 15px 35px;
    margin: 26px 5px 0 5px;
    cursor: pointer;
}
</style>